<template>
  <div style="height: 100%">
    <div class="share-mask" v-if="popupVisible">
      <img @click="popupVisible=false" src="../assets/share-guide.png" style="width: 100%; margin-top: -32px;"/>
    </div>
    <div style="width: 100%">
      <mt-header :title=article.title style="width: 100%;position: fixed">
        <router-link slot="left" to="/">
          <mt-button icon="back">返回</mt-button>
        </router-link>
        <mt-button @click="share" slot="right" v-if="!popupVisible">分享</mt-button>
      </mt-header>
    </div>
    <div style="height: 45px">
    </div>
    <div style="display: flex;
    flex-flow: column;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;">
    <div style="display: flex;padding:10px;flex-shrink: 0;">
      <div>
        <img :src="author.headimgurl" style="width: 50px;height: 50px;padding: 5px"/>

      </div>
      <div style="display: flex;flex-flow: column;justify-content: space-around;padding: 5px">
        <div style="font-family: 微软雅黑;padding: 0px;">{{author.nickname}}</div>
        <div style="color:gray;font-size:13px">发布于{{article.createTime}}</div>
      </div>
    </div >
        <article-viewer  ref="articleViewer" :hasPayed="hasPayed" :article="article" v-show="article.type=='article'" @change-payed-user-list="getPayedList()"></article-viewer>
        <video-viewer  @close-share-guid="popupVisible=false" ref="videoViewer" @show-share-page="popupVisible=true" :hasPayed="hasPayed" :article="article" v-show="article.type=='video'" @change-payed-user-list="getPayedList()"></video-viewer>

    <div>
    </div>

      <payed-user-list @has-user-payed="hasUserPayed" :id="id" ref="payedUserList" ></payed-user-list>
    </div>
  </div>
</template>
<style scoped>
  .share-mask {
    position: absolute;
    background: rgba(4, 4, 4, 0.76);
    width: 100%;
    height: 100%;
    z-index: 1;
  }
</style>
<script>
  import {getArticle,addUserToPayedList} from '../api/api'
  import PayedUserList from './common/PayedUserList'
  import MyVideo from './MyVideo'
  import VideoViewer from './VideoViewer'
  import ArticleViewer from './ArticleViewer'
  export default {
    components:{PayedUserList,MyVideo,VideoViewer,ArticleViewer},
    data(){
      return {
        id:'',
        popupVisible: false,
        article: {
          content: '',
          title: '',
          price: 0,
          id: ''
        },
        author: {},
        hasPayed:false,
      }
    },
    mounted(){
      this.id = this.getQueryString('id');
      this.getPayedList();
      this.getArticle();
    },
    methods:{
      hasUserPayed(b){
        this.hasPayed=b;


      },
      getPayedList(){
        this.$refs.payedUserList.getData();
      },
      share() {

        this.popupVisible = true;
      },
      getArticle() {
        let vm=this;
        getArticle({article: this.id}).then((res) => {
          vm.article = res.data.data.article;
          vm.author = res.data.data.author;
          let content=this.article.content.replace(/[^\u4e00-\u9fa5]/gi,"");
          if(vm.article.type=='article'){

            this.initWeChatShare( '有人发了一条帖子,分享给你看:'+this.article.title, content,this.author.headimgurl,this.afterShareArticle,this.afterShareArticle);
          }else{

            this.initWeChatShare( '很有趣的一个视频,分享给你看:'+this.article.title,content,this.article.image,this.afterShareVideo,this.afterShareVideo);
          }

        });
      },
      afterShareVideo(){

        this.$refs.videoViewer.share();
        this.addToPayedUser();
      },
      addToPayedUser(){
        let vm=this;
        let user = JSON.parse(sessionStorage.getItem('user'));

        addUserToPayedList({
          orderId: '',
          openid: sessionStorage.getItem('openid'),
          articleId: vm.id,
          headimgurl: user.headimgurl
        }).then((res) => {

          if (res.data.result) {
            vm.getPayedList();

          }else{
            vm.setNoOk();
          }
        });
      }
      ,afterShareArticle(){

        this.$refs.articleViewer.setOk();
        this.addToPayedUser();
      }

    },

    watch:{
      '$store.state.dataChanged'(r1, r2) {
        this.$refs.payedUserList.getData();
        this.getArticle();

      }
    }
  }
</script>
